<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮箱" ></el-table-column>
      <el-table-column prop="content" label="内容" ></el-table-column>
      <el-table-column fixed="right" label="操作" >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="handleDelete(scope.$index, scope.row)"
            type="danger"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24">
        <div class="paginations">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @prev-click="handlePre"
            @next-click="handleNext"
            :current-page="currentPage"
            :page-size="10"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!--弹框-->
   
  </div>
</template>

<script>
import {reqFeedback,reqFeedbackDelete} from "../../api";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 1
    };
  },
  created(){
    this.getFeedback(1)
  },
  methods: {
    //获取留言信息
     getFeedback(page) {
      reqFeedback({ page })
        .then(res => {
          res.data.map(item=>{
            let time = new Date(item.date);
            let y = time.getFullYear();
            let m = (time.getMonth()+1).toString().padStart(2,'0');
            let d = time.getDate().toString().padStart(2,'0');
            item.date = y+'-'+m+'-'+d;
            return item;
          })
          this.tableData = res.data;
          this.total = res.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
     //点击上一页触发
    handlePre(page) {
      this.getFeedback(page);
    },
    //点击下一页触发
    handleNext() {
      this.getFeedback(page);
    },
    //点击页码触发
    handleCurrentChange(page) {
      this.getFeedback(page);
    },
    //删除留言
     handleDelete(index, row) {
      reqFeedbackDelete({ id: row._id })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.tableData.splice(index,1)
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "删除失败",
            type: "error"
          });
        });
    },
  }
};
</script>

<style scoped>
.paginations {
  text-align: right;
  margin-top: 10px;
}
</style>